<template>
  <uni-card
    :title="`冰箱编码${
      isEdit ? data.bianHao : formComponentList[0].defaultValue
    }`"
  >
    <view v-show="!isEdit">
      <uni-row>
        <uni-col :span="15">
          <uni-data-checkbox
            mode="button"
            v-model="radio"
            :localdata="radioData"
            @change="handleRadioChange"
          ></uni-data-checkbox>
        </uni-col>
        <uni-col :span="9">
          <uni-data-checkbox
            multiple
            mode="button"
            v-model="checkbox"
            @change="handleCheckboxChange"
            :localdata="[{ text: '小数点', value: '0' }]"
          ></uni-data-checkbox>
        </uni-col>
      </uni-row>
    </view>

    <uni-forms-item label-width="100%" required label="冰箱显示温度">
      <uni-easyinput
        class="mb-2"
        v-model="data.xianShiWenDu"
        :disabled="isEdit"
      />
      <uni-file-picker
        file-mediatype="image"
        v-model="data.xianShiWenDuImg"
        mode="grid"
        @select="uploadByXianShiWenDuImg"
        :disabled="isEdit"
      ></uni-file-picker>
    </uni-forms-item>
    <uni-forms-item
      label-width="100%"
      label="食品取代物中心温度或测试水瓶中心温度"
    >
      <uni-easyinput
        class="mb-2"
        v-model="data.zhongXinWenDu"
        :disabled="isEdit"
      />
      <uni-file-picker
        v-model="data.zhongXinWenDuImg"
        file-mediatype="image"
        mode="grid"
        @select="uploadByZhongXinWenDuImg"
        :disabled="isEdit"
      ></uni-file-picker>
    </uni-forms-item>
  </uni-card>
</template>

<script lang="ts" setup>
import type { FormComponent } from '@/services/types/review';
import { uploadImg } from '@/utils/http';
import { convertToArray } from '@/utils/utils';
import { ref, onMounted } from 'vue';
import {
  random0_4,
  random15_22,
  random0_09,
  randomPlusOrMinus,
} from '@/utils/utils';
// 接收props参数
const props = defineProps({
  operatorDataItemList: {
    type: Array as any,
    default: '',
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});

const formComponentList = props.operatorDataItemList as FormComponent[];
let isEdit = props.isEdit;
// 定义数据
const data = ref({
  bianHao: '',
  xianShiWenDu: '',
  xianShiWenDuImg: [] as { url: string; extname: string; name: string }[],
  zhongXinWenDu: '',
  zhongXinWenDuImg: [] as { url: string; extname: string; name: string }[],
});

onMounted(() => {
  // 使用xianShiWenDu的componentValue判断是提交还是查看
  if (formComponentList[0].componentValue) {
    // 查看
    showData();
  } else {
    // 新增
    console.log('新增');
  }
});
// 上传 显示温度图片
const uploadByXianShiWenDuImg = (e: UniHelper.PickerInstance) => {
  uploadImg(e).then((res) => {
    data.value.xianShiWenDuImg.push({
      url: res.url,
      extname: 'jpg',
      name: res.key,
    });
  });
};
// 上传 中心温度图片
const uploadByZhongXinWenDuImg = (e: UniHelper.PickerInstance) => {
  uploadImg(e).then((res) => {
    data.value.zhongXinWenDuImg.push({
      url: res.url,
      extname: 'jpg',
      name: res.key,
    });
  });
};
// 展示数据函数
const showData = () => {
  // 编号
  data.value.bianHao = formComponentList[0].componentValue!;
  // 显示温度
  data.value.xianShiWenDu = formComponentList[1].componentValue!;
  // 显示温度图片
  if (formComponentList[2].componentValue) {
    data.value.xianShiWenDuImg = [];
    data.value.xianShiWenDuImg.push({
      url: formComponentList[2].componentValue,
      extname: 'jpg',
      name: formComponentList[2].componentValue,
    });
  }
  if (formComponentList[2].componentValue) {
    data.value.xianShiWenDuImg = [];
    data.value.xianShiWenDuImg.push(
      ...convertToArray(formComponentList[2].componentValue),
    );
  }
  // 中心温度
  data.value.zhongXinWenDu = formComponentList[3].componentValue!;
  // 中心温度图片
  if (formComponentList[4].componentValue) {
    data.value.zhongXinWenDuImg = [];
    data.value.zhongXinWenDuImg.push(
      ...convertToArray(formComponentList[4].componentValue),
    );
  }
  isEdit = true;
};

// 单选框数据
const radioData = [
  { text: '冰箱', value: '0' },
  { text: '冷柜', value: '1' },
];
// 冰箱数据
let bingXiang = random0_4();
// 冷柜数据
let lengJiang = random15_22();

// 单选框选择事件
const handleRadioChange: UniHelper.RadioGroupOnChange = (e) => {
  checkbox.value = [];
  if (e.detail.value === '0') {
    data.value.xianShiWenDu = bingXiang + '°C';
    data.value.zhongXinWenDu =
      randomPlusOrMinus(bingXiang) + random0_09() + '°C';
  } else {
    data.value.xianShiWenDu = '-' + lengJiang + '°C';
    let d = randomPlusOrMinus(lengJiang) + random0_09();
    data.value.zhongXinWenDu = '-' + d + '°C';
  }
};
// 复选框选择事件
const handleCheckboxChange: UniHelper.CheckboxGroupOnChange = (e) => {
  if (e.detail.value.includes('0')) {
    if (radio.value === '0') {
      let d = bingXiang + random0_09();
      data.value.xianShiWenDu = d + '°C';
    } else {
      let c = randomPlusOrMinus(lengJiang) + random0_09();
      data.value.xianShiWenDu = '-' + c + '°C';
    }
  } else {
    if (radio.value === '0') {
      data.value.xianShiWenDu = bingXiang + '°C';
    } else {
      data.value.xianShiWenDu = '-' + lengJiang + '°C';
    }
  }
};
// 单选框
const radio = ref();
// 复选框
const checkbox = ref([]);
//暴露
defineExpose({ data });
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
